<template>
  <div>
    <!--介绍-->
    <el-card class="box-card">
      <el-row :gutter="16">
        <el-col style="min-width: 120px; "
                :span="6">
          <el-image
              style="min-width: 120px; "
              :src="require('../assets/img/示例.jpg')"
              fit="cover"></el-image>
        </el-col>
        <el-col :span="18" style="text-align: left">
          <p style="font-size: x-large">{{ authorInfo.aname }} <span
              style="font-size: medium">【{{ authorInfo.adynasty }}】</span></p>
          <p>
            {{ authorInfo.adetail }}
          </p>


        </el-col>
      </el-row>
    </el-card>
    <!--写了多少诗词-->
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: left">
        <h4>{{ `${authorInfo.aname}的诗词` }}</h4>
      </div>
      <el-row :gutter="16">
        <el-col :span="24" class="flex-col al-left">
          <router-link style="color: #0a9178" :to="{path:`/poemList/${authorInfo.aname}/${authorInfo.aid}`}">
            {{ authorInfo.aname + '写的全部诗词' }}
          </router-link>
        </el-col>
      </el-row>
    </el-card>
    <!--详细介绍和评价-->
    <el-card class="box-card">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="介绍" name="first">
          <div v-html="formatInfo(this.authorInfo.aintroduce)">
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价" name="second">
          <div v-html="formatInfo(this.authorInfo.aappraise,1)">
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import {reqGetAuthorSingle} from '@/API/modules/author'

export default {
  name: "AuthorItem",
  data() {
    return {
      authorInfo: {},
      activeName: 'first'
    }
  },
  methods: {
    async getAuthorSingle() {
      let result = await reqGetAuthorSingle(this.$route.params.id);
      if (result.status == 200) {
        this.authorInfo = result.data.data
      }
    },

    formatInfo(str, type) {
      if (str != undefined) {
        let arrStr
        if (type === 1) {
          arrStr = str.match(/.+(?=<br\/>)/g)
        } else {
          arrStr = str.match(/.+(?=\r\n<br\/>)/g)
        }
        if (arrStr != null) {
          arrStr.forEach((item, index) => {
            arrStr[index] = `<p>${item}</p>`
          })
          return arrStr.join('')
        }
      }
      return str
    }

  },
  mounted() {
    this.getAuthorSingle()
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>